<template>
  <div>
    <!-- 业务分析 -->
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <!-- 股东架构图 -->
      <div class="item_box">
        <el-row>
          <el-col :span="16">
            <TreeShareholderEquity></TreeShareholderEquity>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="24">
                <el-descriptions
                  :title="custInfo.custName"
                  :column="1"
                  label-align="right"
                  :border="true"
                >
                  <el-descriptions-item label="法定代表人" width="100" label-align="right">
                    <span>{{ custInfo.legalRepresentative }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="企业类型" width="100" label-align="right">
                    <span>{{ custInfo.type }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="统一社会信用代码" width="100" label-align="right">
                    <span>{{ custInfo.certNo }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="注册资本" width="100" label-align="right">
                    <span>{{ custInfo.registeredCapital }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="成立日期" width="100" label-align="right">
                    <span>{{ custInfo.establishTime }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="所属行业一级" width="100" label-align="right">
                    <span>{{ custInfo.industryOne }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="所属行业二级" width="100" label-align="right">
                    <span>{{ custInfo.industryTwo }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="上级机构占股比" width="100" label-align="right">
                    <span>{{ custInfo.topShareholding }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="股权层级" width="100" label-align="right">
                    <span>{{ custInfo.equityHierarchy }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="业务归属层级" width="100" label-align="right">
                    <span>{{ custInfo.attributionHierarchy }}</span>
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
              <el-col :span="24">
                <el-row :gutter="20" class="mt20">
                  <el-col :span="12">
                    <el-descriptions
                      title="所选节点及其下属节点概况"
                      :column="1"
                      label-align="right"
                      :border="true"
                    >
                      <el-descriptions-item label="当前存在有限保单客户" width="100" label-align="right">
                        <span>{{ custInfo.num1 }}</span>
                      </el-descriptions-item>
                      <el-descriptions-item label="客户数量" width="100" label-align="right">
                        <span>{{ custInfo.num2 }}</span>
                      </el-descriptions-item>
                      <el-descriptions-item label="三航客户" width="100" label-align="right">
                        <span>{{ custInfo.num3 }}</span>
                      </el-descriptions-item>
                      <el-descriptions-item label="企客客户" width="100" label-align="right">
                        <span>{{ custInfo.num4 }}</span>
                      </el-descriptions-item>
                      <el-descriptions-item label="重客客户" width="100" label-align="right">
                        <span>{{ custInfo.num5 }}</span>
                      </el-descriptions-item>
                      <el-descriptions-item label="团车客户" width="100" label-align="right">
                        <span>{{ custInfo.num6 }}</span>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-col>
                  <el-col :span="12">
                    <el-descriptions
                      title="图例说明"
                      :column="1"
                      label-align="right"
                      :border="true"
                    >
                      <el-descriptions-item label-align="right">
                        <template #label>
                          <svg-icon icon-class="tag_1"/>
                        </template>
                        <span>启信宝认证企业</span>
                      </el-descriptions-item>
                      <el-descriptions-item label-align="right">
                        <template #label>
                          <svg-icon icon-class="tag_2"/>
                        </template>
                        <span>存在累计保费</span>
                      </el-descriptions-item>
                      <el-descriptions-item label-align="right">
                        <template #label>
                          <svg-icon icon-class="tag_3"/>
                        </template>
                        <span>当前存在有效保单</span>
                      </el-descriptions-item>
                      <el-descriptions-item label-align="right">
                        <template #label>
                          <span class="tagIcon" style="background: #fce3b4;"></span>
                        </template>
                        <span>业务归属标签：重客</span>
                      </el-descriptions-item>
                      <el-descriptions-item label-align="right">
                        <template #label>
                          <span class="tagIcon" style="background: #b7d883;"></span>
                        </template>
                        <span>业务归属标签：企客</span>
                      </el-descriptions-item>
                      <el-descriptions-item label-align="right">
                        <template #label>
                          <span class="tagIcon" style="background: #c8e2fc;"></span>
                        </template>
                        <span>业务归属标签：三航</span>
                      </el-descriptions-item>
                      <el-descriptions-item label-align="right">
                        <template #label>
                          <svg-icon icon-class="tag_8"/>
                        </template>
                        <span>业务归属标签：团车</span>
                      </el-descriptions-item>
                      <el-descriptions-item label-align="right">
                        <template #label>
                          <svg-icon icon-class="tag_9"/>
                        </template>
                        <span>本年新增/变更至</span>
                      </el-descriptions-item>
                      <el-descriptions-item label-align="right">
                        <template #label>
                          <svg-icon icon-class="tag_11"/>
                        </template>
                        <span>处于变更过程的节点</span>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <p class="title_1">法人客户A-分支机构信息</p>
            <div class="ml10 mr10 mt20">
              <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-form-item label="客户名称" prop="custName">
                  <el-input
                    v-model="queryParams.custName"
                    clearable
                    style="width: 200px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleQuery">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="ml10 mr10">
              <el-table :data="tableList_1">
                <el-table-column label="分支机构客户名称" align="center" prop="custName" min-width="150" :show-overflow-tooltip="true"/>
                <el-table-column label="证件号码类型" align="center" prop="certType" min-width="150" :show-overflow-tooltip="true"/>
                <el-table-column label="证件号码" align="center" prop="certNo" :show-overflow-tooltip="true"/>
                <el-table-column label="业务归属" align="center" prop="attributionHierarchy" min-width="150" :show-overflow-tooltip="true"/>
                <el-table-column label="总部管理处室" align="center" prop="section" min-width="120" :show-overflow-tooltip="true"/>
              </el-table>
              <pagination
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="handleQuery"
              />
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row class="mt20 mb20">
        <el-col :span="24">
          <div>
            <div class="title_c">统计范围：单节点 &nbsp;&nbsp;&nbsp; 客户名称：<span class="title_n">{{ custInfo.custName }}</span></div>
          </div>
        </el-col>
      </el-row>
      <el-tab-pane name="1" label="保费信息">
        <div class="item_box">
          <el-tabs type="card" v-model="activeName_1" @tab-click="handleClick">
            <el-tab-pane name="1" label="汇总统计">
            </el-tab-pane>
            <el-tab-pane name="2" label="维度分解">
            </el-tab-pane>
            <el-tab-pane name="3" label="明细查询"></el-tab-pane>
            <p class="title_1">概要统计-保费规模</p>
            <el-row class="mt20 mb20">
              <el-col :span="24" class="mb20">
                <el-checkbox-group v-model="checked0" @change="handleChange">
                  <el-checkbox-button :value="0" label="全部"></el-checkbox-button>
                  <el-checkbox-button :value="1" label="车险"></el-checkbox-button>
                  <el-checkbox-button :value="2" label="非车"></el-checkbox-button>
                  <el-checkbox-button :value="3" label="农险"></el-checkbox-button>
                </el-checkbox-group>
              </el-col>
              <el-col :span="24">
                <el-table
                  :data="dataList"
                  border
                  v-loading="loading0"
                >
                  <el-table-column label="/" align="center" prop="title" :show-overflow-tooltip="true"/>
                  <el-table-column label="本日" align="center" prop="num0" :show-overflow-tooltip="true"/>
                  <el-table-column label="本月" align="center" prop="num1" :show-overflow-tooltip="true"/>
                  <el-table-column label="上月" align="center" prop="num2" :show-overflow-tooltip="true"/>
                  <el-table-column label="本年" align="center" prop="num3" :show-overflow-tooltip="true"/>
                  <el-table-column label="上年" align="center" prop="num4" :show-overflow-tooltip="true"/>
                </el-table>
              </el-col>
            </el-row>
            <el-tabs type="card" v-model="activeName_2" @tab-click="handleClick">
              <el-tab-pane name="1" label="入账保费"></el-tab-pane>
              <el-tab-pane name="2" label="签单保费"></el-tab-pane>
              <el-tab-pane name="3" label="起保保费"></el-tab-pane>
              <el-tab-pane name="4" label="起保未入账保费"></el-tab-pane>
              <el-tab-pane name="5" label="入账含起保未入账"></el-tab-pane>
                <dailyPremium></dailyPremium>
                <monthlyPremium></monthlyPremium>
                <annualPremium></annualPremium>
                <monthlyPremiumYield></monthlyPremiumYield>
            </el-tabs>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane name="2" label="理赔信息">
        <div class="item_box" v-if="activeName == '2'">
          <el-tabs type="card" v-model="activeName_3" @tab-click="handleClick">
            <el-tab-pane name="1" label="汇总统计">
            </el-tab-pane>
            <el-tab-pane name="2" label="维度分解">
            </el-tab-pane>
            <el-tab-pane name="3" label="明细查询"></el-tab-pane>
            <p class="title_1">概要信息-保费规模</p>
            <el-tabs type="card" v-model="activeName_4" @tab-click="handleClick">
              <el-tab-pane name="1" label="赔款支出"></el-tab-pane>
              <el-tab-pane name="2" label="估损金额"></el-tab-pane>
              <el-tab-pane name="3" label="赔案件数"></el-tab-pane>
                <reparationsDailyPremium></reparationsDailyPremium>
                <reparationsMonthlyPremium></reparationsMonthlyPremium>
            </el-tabs>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane name="3" label="保险标的">
        <subjectMatterInsured></subjectMatterInsured>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="businessAnalysis">
import { onMounted, reactive, ref, toRefs, watch } from 'vue';
import dailyPremium from './components/dailyPremium.vue';
import monthlyPremium from './components/monthlyPremium.vue';
import annualPremium from './components/annualPremium.vue';
import monthlyPremiumYield from './components/monthlyPremiumYield.vue';
import TreeShareholderEquity from './components/TreeShareholderEquity.vue';
import reparationsDailyPremium from './components/reparationsDailyPremium.vue'
import reparationsMonthlyPremium from './components/reparationsMonthlyPremium.vue'
import subjectMatterInsured from './components/subjectMatterInsured.vue'

  const activeName = ref('1')
  const activeName_1 = ref('1')
  const activeName_2 = ref('1')
  const activeName_3 = ref('1')
  const activeName_4 = ref('1')
  const total = ref(0)
  const tableList_1 = ref([])
  const checked0 = ref([])
  const loading0 = ref(false)

  let prop = defineProps({
    custInfo: Object,
    type: String
  })

  const data = reactive({
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      custName: '',
    }
  })
  const { queryParams } = toRefs(data);
  const dataList = ref([
    {
      title: '入账保费(万元)',
      num0: '1.2',
      num1: '10',
      num2: '11',
      num3: '112',
      num4: '120',
    },
    {
      title: '签单保费(万元)',
      num0: '1.5',
      num1: '12',
      num2: '11',
      num3: '120',
      num4: '118',
    },
    {
      title: '起保保费(万元)',
      num0: '1.71',
      num1: '13',
      num2: '11',
      num3: '123',
      num4: '120',
    },
    {
      title: '起保未入账保费(万元)',
      num0: '1.2',
      num1: '10',
      num2: '12',
      num3: '112',
      num4: '120',
    },
    {
      title: '入账保费(万元)',
      num0: '2.2',
      num1: '20',
      num2: '21',
      num3: '212',
      num4: '220',
    },
  ])

  const handleChange = (val) => {
    loading0.value = true
    setTimeout(() => {
      loading0.value = false
    }, 500);
  }

  function handleClick(tab) {
    console.log(tab)
  }
  function handleQuery() {
    tableList_1.value.push(prop.custInfo)
    total.value = tableList_1.value.length
  }
  handleQuery()
  
</script>

<style lang="scss" scoped>
  .title_c {
    height: 50px;
    font-weight: 700;
    background: #f0ffff;
    padding-left: 20px;
    line-height: 50px;
    border-radius: 10px;
  }
  .title_n {
    color: #077db3;
  }
  .tagIcon {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
  }
</style>